import Taro from '@tarojs/taro-rn';
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import PageFooterInfo from "../../components/PageFooterInfo";
import page1_step_twoStyleSheet from "./page1_step_two_styles";
import result from '../../assets/img/icon_30.png';
import point_on from '../../assets/img/icon_23.png';
import line_on from '../../assets/img/icon_24.png';
import point from '../../assets/img/icon_25.png';
import { getRuntime } from "../../utils/common";
// 工程金融中心-计算结果
var _styleSheet = page1_step_twoStyleSheet;
let Page1_step_two = class Page1_step_two extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bfAmountOfMoney: '',
      freeAmountOfMoney: ''
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '工程保函中心' });
    let { bfAmountOfMoney, freeAmountOfMoney } = getRuntime().getStorage('projectInsurance');
    this.setState({
      bfAmountOfMoney, freeAmountOfMoney
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  render() {
    let { bfAmountOfMoney, freeAmountOfMoney } = this.state;
    return <View style={_styleSheet["result-wrap"]}>
        <View style={_styleSheet["step-line"]}>
          <View style={_styleSheet["step-icon"]}>
            <Image src={point_on} style={_styleSheet["point"]} />
            <Image src={line_on} style={_styleSheet["line"]} />
            <Image src={point_on} style={_styleSheet["point"]} />
            <Image src={line_on} style={_styleSheet["line"]} />
            <Image src={point} style={_styleSheet["point"]} />
          </View>
          <View style={_styleSheet["step-content"]}>
            <Text style={[_styleSheet["title"], _styleSheet["color-light"]]}>保费计算</Text>
            <Text style={[_styleSheet["title"], _styleSheet["color-light"]]}>提交资料</Text>
            <Text style={_styleSheet["title"]}>预约办理</Text>
          </View>
        </View>

        <Image src={result} style={_styleSheet["result"]} />

        <View style={_styleSheet["item-wrap"]}>
          <View style={_styleSheet["item-result"]}>
            <View style={_styleSheet["item-title"]}>预计需要的保费金额:</View>
            <View style={_styleSheet["item-price"]}>
              <Text style={_styleSheet["price"]}>{bfAmountOfMoney}</Text>元
            </View>
            <View style={_styleSheet["line"]} />
          </View>

          <View style={_styleSheet["item-result"]}>
            <View style={_styleSheet["item-title"]}>预计帮您免缴保证金总金额:</View>
            <View style={_styleSheet["item-price"]}>
              <Text style={_styleSheet["price"]}>{freeAmountOfMoney}</Text>元
            </View>
          </View>
          <View style={_styleSheet["line"]} />
        </View>

        <PageFooterInfo />

        <View onClick={this.handelRouter.bind(this, '/pages/finance/page1_step_three')} style={_styleSheet["page-submit"]}>提交资料</View>


      </View>;
  }
};

export default Page1_step_two;